<template>
	<view class="content">
		<ZPaging
		    ref="paging"
		    v-model="list"
			:auto="false"
		    :auto-show-system-loading="true"
			system-loading-text="Loading"
			loading-more-no-more-text="沒有更多了"
			loading-more-default-text="點擊加載更多"
			loading-more-loading-text="正在加載..."
			loading-more-fail-text="加載失敗,點擊重新加載"
			empty-view-text="沒有數據哦~"
			refresher-default-text="繼續下拉刷新"
			refresher-pulling-text="鬆開立即刷新"
			refresher-refreshing-text="正在刷新"  
			empty-view-reload-text="重新加載"
			empty-view-error-text="加載失敗"
		    @query="queryList"
		>
		     <template #top>
		        <NavBar :title="title" :autoBack="false" id="nav">
					<template #left>
						<view class="navbar-left center" @click="goBack">
							<u-icon name="arrow-left" color="#007aff" size="34"></u-icon>
						</view>
					</template>
		        </NavBar>
		    </template>
		    <template #default>
		
		        <view class="widths list">
					<view class="item" v-for="(v,k) in list" :key="k" @click="toPrevImg(v.img)">
						<view class="picbox">
							<u-image :src="`${baseUrl}${v.img}`"
							 height="400rpx" mode="aspectFill"
							 ></u-image>
						</view>
						<view class="txt">{{timefomat(v.time)}}</view>
					</view>
		        </view>
		
		    </template>
		 </ZPaging>
		 <Tabar></Tabar>
	</view>
</template>

<script>
	import { mapState, mapMutations } from "vuex";
	import {
		baseUrl,
		videoImgBaseUrl
	} from "@/api/url.js"
	import { getCasePicslist } from "@/api/apis.js"
	import NavBar from "@/component/NavBar"
	import Tabar from "@/component/HomeTab"
	import ZPaging from "@/node_modules/z-paging/components/z-paging/z-paging.vue"
	export default {
		components:{
			NavBar,
			ZPaging,
			Tabar
		},
		data() {
			return {
				isPc:null,
				title:"快照列表",
				list:[],
				caseid:"",
				did:"",
				baseUrl:baseUrl
			}
		},
		onShow(){
			const app = getApp();
			this.isPc=app.globalData.isPc
			uni.setStorageSync('tabIndex',1)
			this.setTabList(uni.getStorageSync("bindevice"))
			const {caseid,did} = this.$Route.query 
			if(caseid){
				this.caseid = caseid
				this.did = did
				uni.setStorageSync("caseid",caseid)
				uni.setStorageSync("did",did)
			}else{
				if(uni.getStorageSync('caseid')){
					this.caseid = uni.getStorageSync('caseid')
					this.did = uni.getStorageSync("did")
				}else{
					this.$Toast("數據錯誤")
					setTimeout(()=>{
						this.toPage("Monitor")
					},1200)
				}
			}
			this.$nextTick(()=>{
				if(uni.getStorageSync("islogin")){
					this.changeUserIdent(uni.getStorageSync('ident'))
					this.changeUserName(uni.getStorageSync('name'))
					this.reload();
					this.init()
				}else{
					this.$Toast("請先登錄")
					setTimeout(()=>{
						this.toPage("Home")
					},1200)
				}
			})
			
			
		},
		mounted() {
			this.previousWidth = window.innerWidth;
			this.previousHeight = window.innerHeight;
			window.addEventListener('resize', this.handleResize);
		},
		beforeDestroy() {
		    window.removeEventListener('resize', this.handleResize);
		},
		onLoad() {
			
			
		},
		
		computed: {
			...mapState(["userinfo"]),
		},
		methods: {
			...mapMutations(['chageUserPageType','chageUserPageId','changeUserIdent','changeUserName','setTabList']),
			init(){
				let uid = uni.getStorageSync("uid")
			},
			handleResize(){
				const currentWidth = window.innerWidth;
				  const currentHeight = window.innerHeight;
			
				  if (currentWidth !== this.previousWidth || currentHeight !== this.previousHeight) {
					this.previousWidth = currentWidth;
					this.previousHeight = currentHeight;
					uni.getSystemInfo({
						success: function(res) {
							if (res.platform === 'windows' || res.platform === 'mac') {
								this.loginout()
								location.reload();
							}
						}
					});
				  }
			},
			timefomat(timestamp){
				const date = new Date(timestamp*1000);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			loginout(){
				uni.removeStorageSync("uid");
				uni.removeStorageSync("userToken");
				uni.removeStorageSync("ident")
				uni.removeStorageSync("islogin")
				uni.removeStorageSync("name")
				uni.removeStorageSync("tabIndex")
				uni.removeStorageSync('caseid')
				uni.removeStorageSync("fileDir")
				this.$Toast("退出成功")
				setTimeout(()=>{
					//跳轉到登錄頁
					this.$navi({
					    route:{
					        name:'Home',
					    },
					})
				},1200)
				
			},
			queryList(pageNo,pageSize){
				let data = {
					pageNo,
					pageSize:20,
					caseid:this.caseid,
					did:this.did,
					uid:uni.getStorageSync("uid")
				}
				getCasePicslist(data).then((res)=>{
					this.$refs.paging.complete(res)
				}).catch((err)=>{
					if(err.code === 102){
						this.$ClearLogin(err.msg)
					}else{
						this.$Toast(err.msg)
					}
				})
				
			},
			showSelectCompany(){
				this.showCompany=true
			},
			reload(){
				this.$refs.paging.reload();
			},
			goBack(){
				uni.navigateBack(-1)
			},
			toPrevImg(img){
				uni.previewImage({
					urls: [baseUrl+img],
					longPressActions: {
						success: function(data) {
						},
						fail: function(err) {
							// console.log(err.errMsg);
						}
					}
				});
			},
			toPage(name,params={}){
				this.$navi({
				    route:{
				        name,
						params
				    },
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		min-height: 100vh;
		max-width: 750px;
		margin: 0 auto;
		padding-bottom: 40rpx;
	}
	
	.list{
		padding-top: 88rpx;
		display: flex;
		flex-wrap: wrap;
		/deep/ .u-btn-text{
			color: #fff !important;
		}
		.item{
			width: 49%;
			margin-right: 2%;
			&:nth-child(2n){
				margin-right: 0;
			}
			.txt{
				padding: 8rpx 0;
				color: #666;
			}
		}
	}
</style>
